<template>
  <q-list no-border separator class="relative-position" :class="{' column justify-center': notifications && notifications.length === 0}">
    <div class="flex flex-center">
      <a-none v-if="notifications && notifications.length === 0"></a-none>
    </div>
    <q-item v-for="(notification, index) in notifications" :key="index" class="size-14 row" :class="{'bg-yellow-1': notification.unread}">
      <div class="row col items-center" :class="{'q-py-xs':sparse}">
        <div v-if="notification.verb === 'letter'" class="col row">
          <div class="row items-center">
            <a :href="'/people/'+notification.actor.id" class="link">{{ notification.actor.username }}</a>
            <span class="q-mx-xs">私信：</span>
          </div>
          <div class="col link ellipsis" @click="$bus.$emit('openMessageDialog', notification.actor)">{{ safe(notification.description) }}</div>
        </div>
        <div v-else-if="notification.verb === 'comment'" class="col row">
          <div class="row">
            <a :href="'/people/'+notification.actor.id" class="link">{{ notification.actor.username }}</a>
            <span class="q-mx-xs">评论了你的：</span>
          </div>
            <a :href="getLink(notification)" class="col link ellipsis">
              {{ safe(notification.target.name || notification.target.title) }}
            </a>
        </div>
        <div v-else-if="notification.verb === 'activity'" class="col row">
          <div class="row">
            <a :href="'/people/'+notification.actor.id" class="link">{{ notification.actor.username }}</a>
            <span class="q-mx-xs">赞了你的：</span>
          </div>
          <a v-if="notification.target" :href="getLink(notification)" class="col link ellipsis">{{ safe(notification.target.name || notification.target.title) }}</a>
        </div>
        <div v-else-if="notification.verb === 'follow'" class="col row items-center">
          <a :href="'/people/'+notification.actor.id" class="link">{{ notification.actor.username }}</a>
          <span class="q-mx-xs">关注了你</span>
        </div>
        <div v-if="time" class="text-grey-6">
          <span v-if="$q.screen.gt.md">{{ notification.timestamp.slice(0, 16) }}</span>
          <span v-else>{{ timesince(notification.timestamp) }}</span>
        </div>
      </div>
    </q-item>
  </q-list>
</template>

<script>
  import { sanitizeHtml } from '../utils/string'

  export default {
    name: 'aNotifications',
    data () {
      return {
      }
    },
    props: {
      notifications: {
        type: Array,
        required: false
      },
      time: {
        type: Boolean,
        required: false,
        default: true
      },
      sparse: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    created () {
    },
    computed: {
    },
    watch: {
    },
    methods: {
      getLink (notification) {
        const { type, id } = notification.target
        return `/${type}/${id}/`
      },
      safe (content) {
        content = sanitizeHtml(content, ['p'])
        content = content.replace(/<p>/g, '')
        content = content.replace(/<\/p>/g, '')

        return content
      }
    }
  }
</script>

<style>

</style>
